<template>
  <div>
    <ul class="list">
      <li v-for="(item,index) in page.records" @click="clickItem(index)" :ref="index">
        <div class="activityTitle" onMouseEnter="this.className = 'title onFocus'"
             onMouseLeave="this.className = 'title'">{{ item.title }}
          <i class="el-icon-caret-bottom"></i>
          <!--          <span @click="showAll = !showAll">{{ word }}</span>-->
        </div>
        <div v-show="index==limit" class="activityContent">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="标题：">
              <span>{{ item.title }}</span>
            </el-form-item>
            <el-form-item label="作者：">
              <span>{{ item.author }}</span>
            </el-form-item>
            <el-form-item label="发布时间：">
              <span>{{ getDateTime(item.createTime) }}</span>
            </el-form-item>
            <el-form-item label="摘要：">
              <span>{{ item.contentShort }}</span>
            </el-form-item>
            <el-form-item label="正文：">
<!--              <span v-html="item.content"></span>-->
              <article v-html="item.content" ></article>
            </el-form-item>

          </el-form>


          <!--          <el-form class="activityContent">-->
          <!--            <el-row><span> 活动简介：{{ item.activityIntroduce }}</span></el-row>-->
          <!--            <el-row><span> 活动详情：{{ item.activityDetail }}</span></el-row>-->
          <!--            <el-row><span> 活动类型：{{ item.activityType }}</span></el-row>-->
          <!--            <el-row><span> 活动对象：{{ item.object }}</span></el-row>-->
          <!--            <el-row><span> 活动地址：{{ item.address }}</span></el-row>-->
          <!--            <el-row><span> 开始时间：{{ getDateTime(item.beginTime) }}</span></el-row>-->
          <!--            <el-row><span> 开始时间：{{ getDateTime(item.endTime) }}</span></el-row>-->
          <!--          </el-form>-->
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import {getClubActivity} from '@/api/activity'
import {getDateTime1} from "@/utils/dateTimeUtil";
import {getArticlePageList} from "../../../../api/article";

export default {
  name: "ClubNews",
  data() {
    return {
      limit: -1,
      showAll: false,
      page: {
        total: 100,
        current: 1,
        records: [],
        pages: 10,
      },
      clubId: null,
      clubName: null,
      activityList: null,
      loading: false,
      // currentPage: 1,
      // totalPage: 1,
      allLoading: true,
      // userId: null,
      someVisible: false,
    }
  },
  computed: {
    word: function () {
      if (this.showAll == false) {　　　　　　　　　　　//对文字进行处理
        return '点击展开'
      } else {
        return '点击收起'
      }
    }
  },
  created() {
    this.clubId = this.$route.params.id;
    console.log("clubId:", this.clubId)
    this.getArticleList()
  },
  methods: {
    clickItem(index) {
      if (index == this.limit) {
        this.limit = -1
      } else {
        this.limit = index;
      }
    },
    // getActivityList() {
    //   getClubActivity({
    //     currentPage: this.page.current,
    //     clubId: this.clubId
    //   }).then(res => {
    //     this.page = res.data;
    //     console.log(res.data)
    //     // console.log("活动列表"+this.page.records)
    //   })
    // },
    getArticleList() {
      getArticlePageList({
        clubId: this.clubId,
        status: 1,
        // title: this.title,
        currentPage: this.page.current,
      }).then(res => {
        this.page = res.data.pageList;
        this.clubName = res.data.clubName;
        console.log(this.page.records)
        console.log(this.page.records)
      })
    },

    getDateTime(val) {
      return getDateTime1(val);
    },

  }
}
</script>

<style scoped>
.el-row {
  margin: 10px;
}

li {
  margin-left: 50px;
  display: block;
  text-align: left;
  padding: 10px 0;
}

ul {
  list-style-type: none;
  padding: 0;
}


.title {
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.onFocus {
  color: #729598;
}

.activityTitle {
  color: #464b48;
  /*text-decoration: none;
  */
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.activityContent {
  /*color: #464b48;*/
  font-size: 14px;
  text-decoration: none;
  margin-top: 10px;
}

/*demotable*/
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
</style>
